<template>
	<view>
		<view>
			<view class="head z-flex-c" :style="'padding-top:' + safeTop">
				<view @tap="fanhui" class="fanhui">
					<image class="fanhui-img" src="/static/service/returnkey.png"></image>
				</view>
				<view class="head-title">充值</view>
			</view>
			<view class="head-box">
				<image class="bac-img" src="/static/service/recharger-bac.png"></image>

				<view class="yue">
					<view>
						<view class="z-margin-t-40 z-padding-l-32 yu-text">账户余额(元)</view>
						<view class="z-margin-t-10 z-padding-l-32 money">{{ info.money }}</view>
						<view class="z-text-c detail-btn z-margin-l-32 z-margin-t-32" @tap="toDetail">余额明细</view>
					</view>
					<view>
						<image class="gold" src="/static/service/gold.png"></image>
					</view>
				</view>
			</view>

			<view class="z-padding-t-48 z-padding-lr-32 title">充值金额</view>
			<view class="z-flex-c money-box z-padding-t-40 z-padding-lr-32">
				<view class="each-money z-text-c" :class="price == item ? 'cur-each-money' : ''" v-for="(item,index) in money" @tap="cut(item)">
					￥
					<text class="z-font-40">{{ item }}</text>
				</view>
			</view>

			<view class="input z-padding-32 z-margin-t-32">
				<input placeholder="输入自定金额" type="digit" v-model="price" />
			</view>

			<view class="btn z-text-c" @tap="pay">立即充值</view>

			<view class="agreement-box z-margin-t-32 z-flex-c" @tap="clickread">
				<image src="../../static/login/choose.png" v-if="!agree" class="choose_img" mode="" />
				<image src="../../static/login/choosed.png" v-else class="choose_img" mode="" />
				<view class="z-font-26 text_666 z-flex-c">
					已阅读并同意
					<text class="t-color" @tap="infoTap('recharge_info_id','用户充值协议')">《用户充值协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			money: ['100', '200', '300'],
			price: 100,
			menuH: '32px',
			safeTop: `40px`,
			paytype: 0,
			agree: true,
			info: ''
		};
	},
	onLoad(options) {
		this.safeTop = uni.getSystemInfoSync().statusBarHeight || 20 + 'px';
		this.getInfo();
	},
	methods: {
		fanhui() {
			this.util.back();
		},
		clickread() {
			this.agree = !this.agree
		},
		toDetail() {
			this.util.skip('/service/balanceLog/balanceLog');
		},
		cut(e) {
			this.price = e
		},
		infoTap(e,name) {
			let id = uni.getStorageSync('config').recharge_info_id
			this.util.skip('/service/info/info?id=' + id + '&name=' + name);
		},
		pay() {
			if (!this.agree) return this.util.toast('请先阅读并同意《用户充值协议》');
			http.post('recharge/recharge', {
				type: 'recharge',
				paytype: this.paytype,
				price: this.price
			}).then((res) => {
				uni.requestPayment({
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: (res) => {
						this.util.toast('支付成功');
						this.getInfo();
					},
					fail: (res) => {
						this.util.toast('支付失败');
					}
				});
			});
		},
		getInfo() {
			http.post('index/userindex', '').then((res) => {
				this.info = res.data
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}

.head {
	width: 750rpx;
	display: flex;
	position: absolute;
	top: 1rpx;
	z-index: 9;
}

.fanhui {
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	left: 28rpx;
}

.fanhui-img {
	width: 48rpx;
	height: 48rpx;
}

.head-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #ffffff;

	position: absolute;
	left: 50%;
	transform: translate(-50%);
}

.bac-img {
	width: 750rpx;
	height: 463rpx;
}

.yue {
	width: 686rpx;
	height: 265rpx;
	background: linear-gradient(90deg, #d4fddd 0%, #b9f0c9 100%);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	opacity: 1;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 0;
	display: flex;
	justify-content: space-between;
}

.head-box {
	width: 750rpx;
	height: 463rpx;
	position: relative;
}

.yu-text {
	color: #3d8352;
	font-size: 26rpx;
}

.money {
	font-size: 48rpx;
	margin-top: 10rpx;
	font-weight: bold;
	color: #3d8352;
	line-height: 56rpx;
}

.detail-btn {
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	width: 137rpx;
	height: 56rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	line-height: 56rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #62cb81;
}

.gold {
	width: 317rpx;
	height: 250rpx;
	margin-top: 16rpx;
	margin-right: 37rpx;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}

.money-box {
	flex-wrap: wrap;
}

.each-money {
	width: 213rpx;
	height: 114rpx;
	background: #f5f7f9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	line-height: 114rpx;
	font-size: 22rpx;
	font-weight: bold;
	color: #1c274c;
	border: 2rpx solid #fff;
	margin: 0 18rpx 18rpx 0;
	box-sizing: border-box;
}

.each-money:nth-of-type(3n) {
	margin-right: 0;
}

.cur-each-money {
	background: #f0faf3;
	border: 2rpx solid #62cb81;
	font-weight: bold;
	color: #62cb81;
}

.input {
	width: 622rpx;
	background: #f5f7f9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	margin: auto;
}

.btn {
	width: 686rpx;
	height: 98rpx;
	background: #62cb81;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	font-size: 30rpx;
	line-height: 98rpx;
	font-weight: bold;
	color: #ffffff;
	margin: auto;
	margin-top: 108rpx;
}

.agreement-box {
	width: 422rpx;
	margin: auto;
}

.choose_img {
	width: 32rpx;
	height: 32rpx;
	vertical-align: middle;
	margin-right: 16rpx;
}

.t-color {
	font-size: 26rpx;
	font-weight: 500;
	color: #ff9600;
}
</style>
